<template>
  <TableView
    ref="tableView"
    :table-attrs="{ api: fetchList, descs: ['create_time'] }"
    form-path="/space/fyroomhouse/houseForm/{id:-1}"
    :search-model="searchForm"
    :delete-api="batchDelete"
    :tree-listeners="{ 'node-click': onNodeClick }"
    :tree-attrs="{
      fetchApi: storeyTree,
      show: true,
      treeProps: { label: 'name' },
      lazy: false,
      'expand-first-node': true,
      customRootNode: { name: '全部', id: -1 }
    }"
    :toolbar-attrs="{ buttons: ['slot', { del: 'house_fyroomhouse_del', create: 'house_fyroomhouse_add' }] }">
    <template #toolbar-button>
      <ToolbarButton
        privilege="house_fyroomhouse_export"
        type="primary"
        icon="el-icon-download"
        label="导出"
        @click="exportExcel()" />
      <ToolbarButton
        privilege="house_fyroomhouse_export"
        type="primary"
        icon="el-icon-upload"
        label="导入"
        @click="$refs.excelUpload.show()" />
    </template>
    <template #columns>
      <TableColumn label="所属楼栋全称" prop="parentFullname" width="220" />
      <TableColumn label="房间号" prop="name" clickable width="135" />
      <TableColumn label="房屋编码" prop="code" clickable width="135" />
      <TableColumn label="租金" prop="rent" />
      <TableColumn label="产权年限" prop="ageLimit" />
      <TableColumn label="配套电梯" prop="elevator">
        <template #default="{ row }">
          <ElTag>{{ row.elevator === '0' ? '否' : '是' }}</ElTag>
        </template>
      </TableColumn>
      <TableColumn label="房屋朝向" prop="orientation" dict-type="house_face" />
      <TableColumn label="房屋类型" prop="typeCode" dict-type="house_type" />
      <TableColumn label="状态" prop="status" dict-type="house_status" />
      <TableColumn label="房屋用途" prop="purpose" />
      <TableColumn label="使用面积" prop="useArea" />
      <TableColumn label="建筑面积" prop="floorage" />
      <TableColumn label="是否危房" prop="dangerous">
        <template #default="{ row }">
          <ElTag>{{ row.dangerous === '0' ? '否' : '是' }}</ElTag>
        </template>
      </TableColumn>
      <TableColumn label="是否正在施工" prop="construction">
        <template #default="{ row }">
          <ElTag>{{ row.construction === '0' ? '否' : '是' }}</ElTag>
        </template>
      </TableColumn>
      <TableColumn label="建造年代" prop="constructionAge" />
      <TableColumn label="房屋户型" prop="layout" dict-type="house_unit_type" />
      <TableColumn label="装修程度" prop="renovation" dict-type="renovation" />
      <TableColumn label="管理单位" prop="belongouinfoName" />
      <TableColumn label="房屋价格" prop="price" />
      <TableColumn label="备注" prop="remarks" />
    </template>
    <template #search-form>
      <FormInput v-model="searchForm.name" label="房间名称" prop="name" />
      <FormInput v-model="searchForm.ageLimit" label="产权年限" prop="ageLimit" />
      <FormRadioGroup
        v-model="searchForm.elevator"
        label="配套电梯"
        required
        prop="elevator"
        classic
        radio-type="radio"
        :options="[
          { label: '无', value: '0' },
          { label: '有', value: '1' }
        ]" />
      <FormSelect v-model="searchForm.orientation" prop="orientation" label="房屋朝向" dict-type="house_face" />
      <FormSelect v-model="searchForm.typeCode" prop="typeCode" label="房屋类型" dict-type="house_type" />
      <FormSelect v-model="searchForm.status" prop="status" label="状态" dict-type="house_status" />
      <FormInput v-model="searchForm.purpose" label="房屋用途" prop="purpose" />
      <FormInput v-model="searchForm.useArea" label="使用面积" prop="useArea" />
      <FormInput v-model="searchForm.constructionAge" label="建造年代" prop="constructionAge" />
      <FormSelect v-model="searchForm.layout" prop="layout" label="房屋户型" dict-type="house_unit_type" />
      <FormSelect v-model="searchForm.renovation" prop="renovation" label="装修程度" dict-type="house_program" />
    </template>
    <!--excel 模板导入 -->
    <ExcelUpload
      ref="excelUpload"
      title="房屋信息导入"
      :url="`${spaceService}/fyroomhouse/import`"
      :temp-url="`${spaceService}/fyroomhouse/local/houseTemp.xlsx`"
      temp-name="房屋导入模板.xlsx"
      @refreshDataList="refreshChange" />
  </TableView>
</template>

<script>
  import { services } from '@/config'
  import { fetchList, batchDelete } from '@/api/space/fyroomhouse'

  import { storeyTree } from '@/api/space/fyspacetree'

  export default {
    name: 'HouseView',

    data() {
      return {
        searchForm: {
          name: '',
          ageLimit: '',
          elevator: '',
          orientation: '',
          typeCode: '',
          status: '',
          purpose: '',
          useArea: '',
          constructionAge: '',
          layout: '',
          renovation: '',
          dataCode: '',
          id: null,
          regionalId: null,
          edificeId: null,
          storeyId: null
        },
        spaceService: services.spaceService
      }
    },
    methods: {
      batchDelete,
      fetchList,
      storeyTree,
      onNodeClick(node) {
        this.searchForm.dataCode = node.dataCode
        this.$refs.tableView.onSearchClick()
      },
      //  导出excel
      exportExcel() {
        this.$downBlobFile(
          `${services.spaceService}fyroomhouse/export`,
          this.searchForm,
          `房屋管理${this.$dateFormat(new Date())}.xlsx`
        )
      },
      async refreshChange() {
        await this.$refs.tableView.refreshTable()
      }
    }
  }
</script>
